<!-- 临时新增术语和缩略语 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="600px"
    append-to-body
    @close="closeDialog"
    class="business-dialog edit-term-dialog"
    :close-on-click-modal="false"
  >
    <el-form
      :model="formModel"
      ref="form"
      label-width="100px"
      size="small"
      label-suffix=":"
      :rules="rules"
      class="pr40"
    >
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="formModel.type"
          placeholder=""
          clearable
          style="width: 100%"
          :disabled="enableUpdate"
        >
          <el-option label="术语" value="TERM" />
          <el-option label="缩略语" value="ABBREVIATION" />
        </el-select>
      </el-form-item>
      <template v-if="formModel.type === 'TERM'">
        <el-form-item label="中文" prop="nameZh">
          <el-input
            v-model="formModel.nameZh"
            placeholder=""
            clearable
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="英文" prop="nameEn">
          <el-input
            v-model="formModel.nameEn"
            placeholder=""
            clearable
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="缩略词" prop="nameShort">
          <el-input
            v-model="formModel.nameShort"
            placeholder=""
            clearable
            maxlength="100"
          />
        </el-form-item>
      </template>

      <template v-else>
        <el-form-item label="缩略词" prop="nameShort" :rules="{ required: true, message: '请输入缩略词', trigger: 'blur' }">
          <el-input
            v-model="formModel.nameShort"
            placeholder=""
            clearable
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="英文" prop="nameEn">
          <el-input
            v-model="formModel.nameEn"
            placeholder=""
            clearable
            maxlength="100"
          />
        </el-form-item>
        <el-form-item label="中文释义" prop="description">
          <el-input
            v-model="formModel.description"
            placeholder=""
            clearable
            type="textarea"
            maxlength="100"
          />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer pr40">
      <el-button size="small" @click="open = false">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="handleSubmit"
        size="small"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
import { handleAbbreviation, handleTerm } from "@/api/business";

export default {
  name: "TemplateEditModal",
  props: {
    editData: {
      type: Object,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible(val) {
      this.open = val;
      if (!val) {
        // 关闭的时候清空状态
        this.formModel = {
          type: "TERM",
        };
      } else {

      }
    },
    editData(val) {
      if (!val) {
        this.formModel = {
          type: "TERM",
        };
        return
      }
      this.formModel = {
        ...JSON.parse(JSON.stringify(val)),
      };
    },
  },
  computed: {
    enableUpdate() {
      return typeof this.formModel?.id !== "undefined";
    },
    title() {
      if (this.formModel?.type === 'TERM') {
        return this.editData?.id ? '编辑术语' : '新增术语';
      }
      return this.editData?.id ? '编辑缩略语' : '新增缩略语';
    }
  },
  data() {
    return {
      open: this.visible,
      formModel: {
        type: "TERM",
      },
      loading: false,
      stdShow: false,
      rules: {
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        nameZh: [
          { required: true, message: "请输入中文", trigger: "blur" },
        ],
        nameEn: [{ required: true, message: "请输入英文", trigger: "blur" }],
        description: [
          { required: true, message: "请输入中文释义", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    closeDialog() {
      this.$emit("update:visible", false);
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        let params = JSON.parse(JSON.stringify(this.formModel));
        const call = params.type === "TERM" ? handleTerm : handleAbbreviation;
        params.type = "1";
        if (this.enableUpdate) {
          params.order = undefined;
          params.status = params.status ? 1 : 0;
        }
        this.loading = true;
        call(params, this.enableUpdate ? "put" : "post")
          .then((res) => {
            Message.success("保存成功");
            this.open = false;
            this.$emit(
              "onSuccess",
              this.enableUpdate ? this.editData?.type : this.formModel.type
            );
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    selectDocument() {
      this.stdShow = true;
    }
  },
};
</script>
<style scoped>
.dialog,
.el-select-dropdown__item {
  font-family: "microsoft yahei";
}
</style>
<style>
.edit-term-dialog .el-form-item__content {
  min-height: 51px;
}
</style>
